<template>
  <view class="app-layout">
    <app-header title="积分调整" />
    <view class="app-main">
      <view class="refund-container">
        <view class="" style=" flex: 1; overflow: hidden;">
          <scroll-view scroll-y="true" style="height: 100%;">
            <view class="details-container">
              <view class="user-info-container">
                <view class="left-section-wrap">
                  <view class="left-section">
                    <view class="avatar-wrapper">
                      <image class="avatar" src="/static/imgs/avatar.png" mode="aspectFill"></image>
                    </view>
                    <view class="vip-badge">
                      {{ userInfo.vipLevel }}
                    </view>
                    <view class="decorate">
                      <text class="decorate-text">{{ userInfo.decorateText }}</text>
                      <image src="/static/imgs/sex1.png" mode=""></image>
                    </view>


                  </view>
                  <view class="points-card">
                    <text class="points-label">可用积分</text>
                    <view class="dashed-line"></view>
                    <text class="points-value">0</text>
                  </view>
                </view>

                <!-- 右侧区域：个人信息详情 -->
                <view class="right-section">
                  <text class="title">个人信息</text>
                  <view class="info-grid">
                    <!-- 左列 -->
                    <view class="info-column" style="flex:2">
                      <view class="info-item">
                        <text class="info-label">会员ID：</text>
                        <text class="info-value">Mc000000001</text>
                      </view>
                      <view class="info-item">
                        <text class="info-label">注册时间：</text>
                        <text class="info-value">2025-08-08 08:08:08</text>
                      </view>
                      <view class="info-item">
                        <text class="info-label">消费金额：</text>
                        <text class="info-value">¥1000.00</text>
                      </view>
                    </view>
                    <!-- 中列 -->
                    <view class="info-column" style="flex:2">
                      <view class="info-item">
                        <text class="info-label">个人电话：</text>
                        <text class="info-value">177****1989</text>
                      </view>
                      <view class="info-item">
                        <text class="info-label">注册渠道：</text>
                        <text class="info-value">Mocup coffee小程序</text>
                      </view>
                    </view>
                    <!-- 右列 -->
                    <view class="info-column">
                      <view class="info-item">
                        <text class="info-label">会员状态：</text>
                        <view class="status-dot normal"></view>
                        <text class="info-value">正常</text>
                      </view>
                      <view class="info-item">
                        <text class="info-label">消费订单：</text>
                        <text class="info-value">10笔</text>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
              <view class="line">

              </view>
              <view class="form-container">
                <!--  <scroll-view scroll-y="true" style="height: 100%;"> -->
                <u-form labelPosition="left" labelWidth="80px" :model="formData" ref="refFrom">
                  <view class="page-product-form-info">
                    <u-form-item label="调整类型" required>
                      <u-radio-group v-model="formData.equityType" @change="changeType">
                        <u-radio :customStyle="{ marginRight: '8px' }" label="补偿积分" :name="1" />
                        <u-radio label="扣减积分" :name="0" />
                      </u-radio-group>
                    </u-form-item>
                    <u-form-item label="调整数值" required>
                      <uni-easyinput placeholder="请输入" type="number" clearable v-model="formData.num"
                        @input="handleNumInput">

                      </uni-easyinput>
                      <view class="suffix-num">
                        当前{{currentPoints}} → 调整后{{revisedPoints}}
                      </view>
                    </u-form-item>
                    <u-form-item label="有效期" required>
                      <uni-datetime-picker type="datetime" v-model="formData.datetimesingle"  />
                    </u-form-item>
                    <u-form-item label="变动原因" required>
                      <u-radio-group v-model="formData.equityType" @change="changeType">
                        <u-radio :customStyle="{ marginRight: '8px' }" label="客户补发" :name="1" />
                        <u-radio :customStyle="{ marginRight: '8px' }" label="活动补发" :name="2" />
                        <u-radio :customStyle="{ marginRight: '8px' }" label="系统纠错" :name="3" />
                        <u-radio label="其它" :name="0" />
                      </u-radio-group>
                    </u-form-item>
                    <u-form-item label="说明" required>
                      <u-textarea v-model="formData.instructions" :placeholder="'请输入'" :maxlength="50" :rows="3"
                        :autosize="true" height="50" count></u-textarea>

                    </u-form-item>
                    <view class="special-formitem">
                      <u-form-item label="详情图" required class="img2">
                        <uploadImage :max-count="3" :initial-images="initialImages" @upload-success="handleUpload"
                          @remove="handleRemove" />
                        <view style="color: #999999; font-size: 14px; margin-bottom: 4px">支持上传支持.jpg/.png，大小不超过3M，最多上传3张
                        </view>
                      </u-form-item>
                    </view>


                    <u-form-item label="备注">
                      <u-textarea v-model="formData.description" :placeholder="'请输入'" height="50" :maxlength="200"
                        :rows="5" :autosize="true" count></u-textarea>
                    </u-form-item>
                  </view>
                </u-form>
                <!-- </scroll-view> -->
              </view>
            </view>
          </scroll-view>
        </view>
        <view class="submit_btncon">
          <view style="display: flex; margin: auto">
            <button class="submit_close" @click="close">取消</button>
            <button class="submit_btn" style="padding:0 32px" @click="submit">确认提交</button>
          </view>
        </view>
      </view>

      <u-popup v-if="showPopup" :show="showPopup" @close="cancelPopup" :round="10" mode="center">
        <view class="popup-con">
          <view class="applyfor-tit">
            确认执行以下操作吗？
          </view>
          <view class="applyfor-info">
            <view class="applyfor-item">
              <view class="normal"></view>
              <text class="lable">类型：</text>
              <text class="value">补偿积分</text>
            </view>
            <view class="applyfor-item">
              <view class="normal"></view>
              <text class="lable">数值：</text>
              <text class="value">+{{Math.abs(Number(formData.num))}}分</text>
            </view>
            <view class="applyfor-item">
              <view class="normal"></view>
              <text class="lable">原因：</text>
              <text class="value">订单漏发积分积分积分订单漏发积分积分积分订单漏发积分积分积分订单漏发积分积分积分订单漏发积分积分积分</text>
            </view>
          </view>
          <view class="button-group">
            <button class="cancel-btn" @click="cancelPopup">取消</button>
            <button class="pay-btn" @click="submitReq">确定</button>
          </view>
        </view>
      </u-popup>
    </view>
  </view>
</template>
<script setup>
  import {
    ref,
    computed
  } from 'vue'
  import {
    onLoad
  } from '@dcloudio/uni-app'
  import {
    getOrder,
    applySubmit
  } from '@/requests/apis/order'
  import
  uploadImage
  from '@/components/upload-image/index.vue'
  let userInfo = ref({
    avatar: '/static/avatar.png',
    points: 0,
    vipLevel: 'V7级',
    decorateText: '大吉大利',
    memberId: 'Mc000000001',
    phone: '177****1989',
    status: '正常',
    registerTime: '2025-08-08 08:08:08',
    registerChannel: 'Mocup coffee小程序',
    orderCount: '10笔',
    consumeAmount: '¥1000.00'
  });
  let currentPoints = ref(100)
  let formData = ref({
    equityType: 1
  })
  let showPopup = ref(false)
  let uploadedImagesOne = ref([])
  const revisedPoints = computed(() => {
    // 处理调整数值为空/无效的情况（显示当前积分）
    if (formData.value.num === '' || isNaN(Number(formData.value.num))) {
      return currentPoints.value;
    }
    const adjustNum = Math.abs(Number(formData.value.num));
    if (formData.value.equityType === 1) {
      return currentPoints.value + adjustNum;
    } else {
      return currentPoints.value - adjustNum;
    }
  });
  const maskClick = (e) => {
    console.log(e)
  }
  // 类型切换时，清空无效数值（可选优化）
  const changeType = () => {
    formData.value.num = '';
  };
  const handleUpload = (imageUrl) => {
    console.log("上传成功")
    uploadedImagesOne.value[0] = imageUrl
  };

  // 处理删除事件
  const handleRemove = (removedUrl) => {
    uploadedImagesOne.value = []
  };
  const submit = () => {
    console.log(formData.value, 'datetimesingledatetimesingle')
    let err = '';
    const intReg = /^[1-9]\d*$/;
    const topRequired = [{
        k: 'num',
        err: '请输入调整数值',
        validate: (value) => {
          const num = Number(value);
          // 1. 校验是否为整数（排除小数）
          if (!Number.isInteger(num)) return false;

          if (formData.value.equityType === 1) {
            return num > 0;
          } else {
            return num !== 0 && Math.abs(num) <= currentPoints.value;
          }
        },
        validateErr: () => {
          if (formData.value.equityType === 1) {
            return '补偿积分必须是大于0的正整数';
          } else {
            const num = Number(formData.value.num);
            if (num === 0) return '扣减积分不能为0';
            if (!Number.isInteger(num)) return '扣减积分必须是整数';
            if (Math.abs(num) > currentPoints.value) {
              return `扣减积分不能超过当前可用积分（当前可用：${currentPoints.value}）`;
            }
            return '扣减积分必须是整数且不超过当前可用积分';
          }
        }
      },
      {
        k: 'datetimesingle',
        err: '请选择有效期'
      },
      {
        k: 'instructions',
        err: '请输入说明'
      },

    ];
    for (const item of topRequired) {
      // 校验必填
      if (!formData.value[item.k] && formData.value[item.k] !== 0) {
        err = item.err;
        break;
      }
      // 校验数值合法性（适配动态错误提示）
      if (item.validate && !item.validate(formData.value[item.k])) {
        // 如果是函数则执行获取动态文案，否则直接用字符串
        err = typeof item.validateErr === 'function' ? item.validateErr() : item.validateErr;
        break;
      }
    }
    if (err) {
      uni.showToast({
        title: err,
        duration: 2000,
        icon: 'none'
      });
      return;
    }

    if (!uploadedImagesOne.value?.length) {
      err = '请上传详情图';
      uni.showToast({
        title: err,
        duration: 2000,
        icon: 'none'
      });
      return;
    }
    showPopup.value = true
  };
  const submitReq = async () => {
    showPopup.value = false
  }
  const cancelPopup = () => {
    showPopup.value = false
  }
  const close = () => {
    uni.navigateBack()
  }
</script>
<style lang="scss" scoped>
  .refund-container {
    margin: 10px 10px 0;
    width: 100%;
    background-color: #fff;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 999999;

    :deep(.uni-date-mask--pc) {
      position: static !important;
    }

    .line {
      padding: 5px 0;
      background: #F7F8FA;
    }

    .details-container {
      display: flex;
      flex-direction: column;
      height: 100%;

      .user-info-container {
        display: flex;
        padding: 30px 38px 20px 38px;
        // margin-bottom: 10px;
        box-sizing: border-box;
        background-color: #fff;
        border-radius: 6px;
        align-items: flex-start;

        .left-section-wrap {
          display: flex;
          margin-right: 32px;

          // 左侧区域
          .left-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-right: 21px;

            .avatar-wrapper {
              .avatar {
                width: 80px;
                height: 80px;
                border-radius: 50%;
              }
            }

            .vip-badge {
              background: linear-gradient(90deg, #FF784F 0%, #FFA26B 100%);
              border-radius: 10px;
              color: #fff;
              font-weight: 500;
              font-size: 12px;
              color: #FFFFFF;
              padding: 2px 6px;
            }

            .decorate {
              display: flex;
              margin-top: 10px;

              image {
                width: 18px;
                height: 18px;
              }

              .decorate-text {
                font-weight: 500;
                font-size: 14px;
                color: #333333;
                line-height: 20px;
                margin-right: 6px;
              }
            }


          }

          .points-card {
            width: 90px;
            height: 70px;
            background: #FFF4F3;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;

            &::before,
            &::after {
              content: '';
              position: absolute;
              width: 8px;
              height: 8px;
              background-color: #fff;
              border-radius: 50%;
              top: 50%;
              transform: translateY(-50%);
            }

            &::before {
              left: -4px;
            }

            &::after {
              right: -4px;
            }

            .points-label {
              font-weight: 400;
              font-size: 14px;
              color: #666666;
              line-height: 20px;
              margin-top: 9px;
              margin-bottom: 6px;
            }

            .dashed-line {
              width: 100%;
              height: 1px;
              background: linear-gradient(to right,
                  #ffcccc 0%,
                  #ffcccc 40%,
                  transparent 40%,
                  transparent 60%,
                  #ffcccc 60%,
                  #ffcccc 100%);
              background-size: 3px 1px;
              margin-bottom: 4px;
            }

            .points-value {
              font-weight: bold;
              font-size: 18px;
              color: #FF5030;
              line-height: 21px;
            }
          }
        }

        // 右侧区域
        .right-section {
          flex: 1;

          .title {
            font-weight: 500;
            font-size: 14px;
            color: #333333;
            line-height: 20px;
            margin-bottom: 6px;
            display: block;
          }

          .info-grid {
            display: flex;
            // gap: 40px;

            .info-column {
              flex: 1;
            }

            .info-item {
              display: flex;
              align-items: center;
              font-weight: 400;
              font-size: 14px;
              color: #666666;
              line-height: 40px;
            }

            .status-dot {
              width: 8px;
              height: 8px;
              border-radius: 50%;
              margin-right: 3px;
              display: inline-block;
              background-color: #F32F1D;
            }

            .status-dot.normal {
              background-color: #07c160;
            }
          }



        }
      }

      .form-container {
        background-color: #fff;
        border-radius: 6px;
        flex: 1;
        display: flex;
        flex-direction: column;
        // overflow: hidden;

        :deep(.u-form) {
          padding: 29px 187px 29px 280px;
          box-sizing: border-box;
        }

        .suffix-num {
          font-weight: 400;
          font-size: 14px;
          color: rgba(51, 70, 129, 0.6);
          margin-left: 7px;
        }

      }

    }

  }

  .popup-con {
    width: 330px;
    background: linear-gradient(180deg, #E3F8FF 0%, #FFFFFF 100%);
    box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.04);
    border-radius: 10px;

    .applyfor-tit {
      font-weight: 500;
      font-size: 16px;
      color: #333333;
      line-height: 22px;
      text-align: center;
      padding-top: 30px;
      padding-bottom: 15px;
      box-sizing: border-box;
    }

    .applyfor-info {
      margin: 0 72px;

      .applyfor-item {
        display: flex;
        align-items: flex-start;
        font-weight: 400;
        font-size: 14px;
        color: #666666;
        line-height: 20px;
        margin-bottom: 8px;

        .normal {
          width: 5px;
          height: 5px;
          background: #0F90FD;
          border-radius: 50%;
          margin-right: 7px;
          display: inline-block;
          margin-top: 9px;
        }

        .lable {
          margin-right: 4px;
          flex-shrink: 0;
        }

        .value {
          flex: 1;
          white-space: normal;
          word-break: break-all;
        }
      }
    }

    .button-group {
      display: flex;
      padding: 0 35px 28px;
      box-sizing: border-box;
      margin-top: 19px;
    }

    .cancel-btn {
      flex: 1;
      height: 40px;
      line-height: 40px;
      background: #EFEFEF;
      border-radius: 21px;
      margin-right: 30rpx;
      font-weight: 400;
      font-size: 14px;
      color: #222222;

      &::after {
        content: " ";
        border: none;
      }
    }

    .pay-btn {
      flex: 1;
      height: 40px;
      line-height: 40px;
      background: #0F90FD;
      border-radius: 21px;
      font-weight: 400;
      font-size: 14px;
      color: #fff;

      &::after {
        content: " ";
        border: none;
      }
    }
  }
</style>
